<template>
  <div class="tree-main">
    <el-input v-if="filterVisible" class="tree-input" v-model="filterText" placeholder="输入关键字" prefix-icon="el-icon-search"></el-input>
    <el-tree
      ref="tree"
      :indent="0"
      :accordion="accordion"
      :auto-expand-parent="autoExpandParent"
      :props="defaultProps"
      :data="data"
      :node-key="nodeKey"
      :filter-node-method="filterNode"
      :show-checkbox="showCheckbox"
      :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="defaultExpandedKeys"
      :draggable="draggable"
      :lazy="lazy"
      :load="load"
      :highlight-current="highlightCurrent"
      :current-node-key="currentNodeKey"
      :expand-on-click-node="expandOnClickNode"
      @node-click="nodeClick"
      @check="check"
      @node-expand="nodeExpand"
      @node-collapse="nodeCollapse"
    >
    <div class="custom-tree-node" slot-scope="{ node, data }">
      <i class="treeIcon" :class="iconClass" v-if="data.children && data.children.length"></i>
      <i class="treeIcon" :class="isLeafIcon" v-if="node.isLeaf"></i>
      <span class="treeTitle">{{ data.name }}</span>
    </div>

    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      // menuVisible: false
    }
  },
  props: {
    // 相邻级节点间的水平缩进，单位为像素
    indent:{
      type:Number,
      default:0
    },
    // 每级是否每次只打开一个同级树节点展开
    accordion:{
      type:Boolean,
      default:false
    },
    // 展开子节点的时候是否自动展开父节点
    autoExpandParent: {
      default: true
    },
    // 树数据
    data: {
      type:Array,
      default:() => []
    },
    // 配置选项(指定节点标签为节点对象的某个属性值):label,children,disabled,isLeaf
    defaultProps: {
      type:Object,
      default:() => {}
    },
    // 默认勾选的节点的 key 的数组
    defaultCheckedKeys: {
      type:Array,
      default:() => []
    },
    // 节点是否可被选择
    showCheckbox: {
      type:Boolean,
      default: false
    },
    // 是否拖拽
    draggable: {
      type:Boolean,
      default: false
    },
    // 是否显示输入框进行过滤
    filterVisible: {
      type:Boolean,
      default: false
    },
    // 默认展开的节点的 key 的数组
    defaultExpandedKeys: {
      type:Array,
      default:() => [0]
    },
    // 是否懒加载子节点，需与 load 方法结合使用
    lazy: {
      type:Boolean,
      default: false
    },
    // 加载子树数据的方法，仅当 lazy 属性为true 时生效
    load: {
      default() {
        return function(node, resolve) {
          console.log('xxx')
        }
      }
    },
    // 是否高亮当前选中节点
    highlightCurrent: {
      type:Boolean,
      default: true
    },
    // 当前选中的节点
    currentNodeKey: {
      type:[String,Number],
      default:0
    },
    // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
    expandOnClickNode: {
      type:Boolean,
      default: true
    },
    // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
    nodeKey : {
      type: String,
      default: 'id'
    },
    iconClass:{
      type: String,
      default: ''
    },
    isLeafIcon:{
      type: String,
      default: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 过滤树
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 点击节点
    nodeClick(data, node, obj) {
      this.$emit('node-click', data, node, obj)
    },
    // 选中变化
    check(data, arr) {
      this.$emit('check', data, arr)
    },
    nodeExpand(data,node,obj){
      this.$emit('node-expand',node)
    },
    nodeCollapse(data,node,obj){
      this.$emit('node-collapse',node)
    }
    // nodeContextMenu(event, object, value, element) {
    //     // 是否开启右键菜单
    //     if (this.contextMenuVisible) {
    //         // 判断右键菜单是否为空
    //         if (this.contextMenuData.size === 0) {
    //             return;
    //         }
    //         this.menuVisible = true;
    //         let menu = document.querySelector('#rightClickMenu');
    //         /* 菜单定位基于鼠标点击位置 */
    //         menu.style.left = event.clientX + 20 + 'px';
    //         menu.style.top = event.clientY - 30 + 'px';
    //         menu.style.position = 'absolute'; // 为新创建的DIV指定绝对定位
    //         menu.style.width = 160 + 'px';
    //     }
    // },
    // handleRightSelect(key) {
    //     this.menuVisible = false;
    //     // 调用父组件的方法
    //     this.$emit('select', key);
    // }
  }
}
</script>
<style lang="scss" scoped>
  .tree-main{
    width: 96%;
    margin: 0 auto;
    // .el-tree-node{
    //   padding-left: 0!important;
    // }
  }
  .tree-input{
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    
  }
// ::v-deep .el-tree-node__expand-icon.expanded {
//     transform: rotate(0deg) !important;
//   }
.custom-tree-node{
  .treeIcon{
    line-height: 18px;
    font-size: 12px;
    color: $defaultBlue;
  }
  .treeTitle{
    width: 142px;//外部容器的宽度
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding-left: 4px;
    white-space: pre-wrap;
    word-break: normal;
    word-wrap: break-word;

  }
}
.custom-tree-node {
      overflow: hidden;
      flex-shrink: 1;
      flex-grow: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 14px;
      padding-right: 8px;
    }

.custom-tree-node .label {
      flex-shrink: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
</style>
